<template>
  <div class="question-container">
    <el-card>
      <!-- 按钮 -->
      <el-col :span="6">
        <span style="color: #ffc0cb; font-size: 12px"
          >说明：目前支持学科和关键字条件筛选</span
        >
      </el-col>
      <div class="btn_wrapper">
        <el-button
          icon="el-icon-edit"
          @click="$router.push('new')"
          type="success"
          size="small"
          >新增试题</el-button
        >
      </div>
      <!-- 筛选 -->
      <el-form label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                @change="changeSubject"
                v-model="requestParams.subjectID"
                style="width: 100%"
              >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="requestParams.catalogID" style="width: 100%">
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="requestParams.tags" style="width: 100%">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="requestParams.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                v-model="requestParams.questionType"
                style="width: 100%"
              >
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="requestParams.difficulty" style="width: 100%">
                <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="requestParams.direction" style="width: 100%">
                <el-option
                  v-for="item in directionOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="requestParams.creatorID" style="width: 100%">
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="requestParams.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="requestParams.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <!-- 城市 -->
              <el-select
                @change="handleCity"
                v-model="requestParams.province"
                style="width: 48%; margin-right: 2%"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <!-- 地区 -->
              <el-select v-model="requestParams.city" style="width: 50%">
                <el-option
                  v-for="item in areaOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button @click="filter()" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab切换 -->
      <el-tabs
        v-model="requestParams.chkState"
        type="card"
        @tab-click="changeTab"
      >
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 数据记录 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        style="margin-bottom: 15px"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <!-- 列表 -->
      <el-table :data="questions" class="my-table">
        <el-table-column
          label="试题编号"
          prop="number"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="学科"
          prop="subject"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="目录"
          prop="catalog"
          width="120px"
        ></el-table-column>
        <el-table-column label="题型" width="120px">
          <template slot-scope="scope">
            {{
              questionType.find(item => item.value === +scope.row.questionType)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template slot-scope="scope">
            {{
              difficulty.find(item => item.value === +scope.row.difficulty)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="creator"
          width="120px"
        ></el-table-column>
        <el-table-column label="审核状态" width="120px">
          <template slot-scope="scope">
            {{ scope.row.chkState | state_chk }}
          </template>
        </el-table-column>
        <el-table-column
          label="审核意见"
          prop="chkRemarks"
          width="150px"
        ></el-table-column>
        <el-table-column
          label="审核人"
          prop="chkUser"
          width="120px"
        ></el-table-column>
        <el-table-column label="发布状态" width="150px">
          <template slot-scope="scope">
            {{ scope.row | state_pub }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200px"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              class="fs"
              type="text"
              @click="openPreviewDialog(scope.row)"
              >预览</el-button
            >
            <el-button
              class="fs"
              type="text"
              @click="openCheckDialog(scope.row)"
              :disabled="scope.row.chkState !== 0"
              >审核</el-button
            >
            <el-button
              class="fs"
              type="text"
              :disabled="scope.row.publishState === 1"
              @click="$router.push(`new?id=${scope.row.id}`)"
              >修改</el-button
            >
            <el-button
              class="fs"
              type="text"
              @click="togglePublish(scope.row)"
              >{{ scope.row.publishState === 1 ? '下架' : '上架' }}</el-button
            >
            <el-button
              class="fs"
              type="text"
              :disabled="scope.row.publishState === 1"
              @click="delQuestion(scope.row)"
              >删除</el-button
            >
            <!-- <el-button class="fs" type="text" @click="delChoice(scope.row)">移出精选</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="requestParams.pagesize"
        :current-page="requestParams.page"
        @current-change="pager"
        :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-card>
    <!-- 预览 -->
    <questions-preview
      ref="questionPreview"
      :data="questionInfo"
    ></questions-preview>
    <!-- 审核 -->
    <questions-check
      ref="questionCheck"
      :data="questionInfo"
      @updateList="getList()"
    ></questions-check>

    <!-- 弹框 -->

    <el-dialog title="题目审核" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-row class="tk">
          <el-radio v-model="radio" label="1">通过</el-radio>
          <el-radio v-model="radio" label="2">拒绝</el-radio>
        </el-row>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入审核建议"
          v-model="advice"
        >
        </el-input
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postAudit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { simple as userList } from '@/api/base/users'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as tagList } from '@/api/hmmm/tags'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'
import {
  choice as questionList,
  remove as questionDel,
  choicePublish
} from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview'
import QuestionsCheck from '../components/questions-check'
export default {
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  filters: {
    state_chk(val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    state_pub(row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    }
  },
  data() {
    return {
      questionInfo: {},
      questionType,
      difficulty,
      total: 0,
      // 注意：如果响应响应式数据 先声明
      questions: [],
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: 'all'
      },
      // 学科选项
      subjectOptions: [],
      // 难度选项
      diffOptions: difficulty,
      // 试题类型选项
      questionTypeOptions: questionType,
      // 标签选项
      tagOptions: [],
      // 城市
      cityOptions: getCity(),
      // 地区 当选择了城市的时候赋值
      areaOptions: [],
      // 方向选项
      directionOptions: direction,
      // 录入人
      userOptions: [],
      // 目录
      directoryOptions: [],
      // 控制弹框显示隐藏
      dialogVisible: false,
      // 控制Radio 单选框
      radio: '1',
      advice: ''
    }
  },
  async created() {
    // 学科下拉选项
    const { data: subjectArr } = await subjectList()
    this.subjectOptions = subjectArr
    // 用户
    const { data: userArr } = await userList()
    this.userOptions = userArr
    this.getList()
  },
  methods: {
    // 切换tab
    changeTab() {
      this.requestParams.page = 1
      this.getList()
    },
    // 下架 或 下架
    async togglePublish(question) {
      await this.$confirm(
        `您确认${question.publishState === 1 ? '下架' : '上架'}这道题目吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
      question.publishState = question.publishState === 1 ? 0 : 1
      await choicePublish(question)
      this.$message.success(
        `${question.publishState === 1 ? '下架' : '上架'}成功`
      )
      this.getList()
    },
    // 审核
    openCheckDialog(questionInfo) {
      this.questionInfo = questionInfo
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.questionCheck.open()
      })
    },
    // 选择学科查询目录和标签的下拉选项数据
    async changeSubject(subjectID) {
      this.requestParams.catalogID = null
      this.requestParams.tags = null
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await directoryList({ subjectID })
        this.directoryOptions = directoryArr
        // 标签下拉选项
        const { data: tagArr } = await tagList({ subjectID })
        this.tagOptions = tagArr
      } else {
        this.directoryOptions = []
        this.tagOptions = []
      }
    },
    openPreviewDialog(questionInfo) {
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },
    async delQuestion(question) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await questionDel(question)
      this.$message.success('删除成功')
      this.getList()
    },

    clear() {
      for (const key in this.requestParams) {
        if (key !== 'page' && key !== 'pagesize') this.requestParams[key] = null
      }
    },
    filter() {
      this.requestParams.page = 1
      this.getList()
    },
    async getList() {
      const params = { ...this.requestParams }
      if (params.chkState === 'all') params.chkState = null
      const { data: questionsData } = await questionList(params)
      this.questions = questionsData.items
      this.total = questionsData.counts
    },
    handleSizeChange(size) {
      this.requestParams.page = 1
      this.requestParams.pagesize = size
      this.getList()
    },
    pager(np) {
      this.requestParams.page = np
      this.getList()
    },
    handleCity(cityName) {
      // 地区选中的数据清空
      this.requestParams.city = null
      // 获取城市下的地区赋值给areaOptions
      this.areaOptions = getArea(cityName)
    },
    postAudit() {
      if (this.advice.trim().length === 0) {
        this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
.btn_wrapper {
  margin-bottom: 15px;
  text-align: right;
}
.fs {
  font-size: 12px;
}
.tk {
  margin-bottom: 20px;
}
</style>
